webpackJsonp([131],{

/***/ 1896:
/***/ (function(module, exports) {

module.exports = {
  "content": [
    "section",
    [
      "p",
      "双栏穿梭选择框。"
    ],
    [
      "h2",
      "何时使用"
    ],
    [
      "p",
      "用直观的方式在两栏中移动元素，完成选择行为。"
    ],
    [
      "p",
      "选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。\n其中，左边一栏为 ",
      [
        "code",
        "source"
      ],
      "，右边一栏为 ",
      [
        "code",
        "target"
      ],
      "，API 的设计也反映了这两个概念。"
    ]
  ],
  "meta": {
    "category": "Components",
    "subtitle": "穿梭框",
    "type": "Data Entry",
    "cols": 1,
    "title": "Transfer",
    "filename": "components/transfer/index.zh-CN.md"
  },
  "toc": [
    "ul",
    [
      "li",
      [
        "a",
        {
          "className": "bisheng-toc-h2",
          "href": "#何时使用",
          "title": "何时使用"
        },
        "何时使用"
      ]
    ],
    [
      "li",
      [
        "a",
        {
          "className": "bisheng-toc-h2",
          "href": "#API",
          "title": "API"
        },
        "API"
      ]
    ],
    [
      "li",
      [
        "a",
        {
          "className": "bisheng-toc-h2",
          "href": "#注意",
          "title": "注意"
        },
        "注意"
      ]
    ]
  ],
  "api": [
    "section",
    [
      "h2",
      "API"
    ],
    [
      "table",
      [
        "thead",
        [
          "tr",
          [
            "th",
            "参数"
          ],
          [
            "th",
            "说明"
          ],
          [
            "th",
            "类型"
          ],
          [
            "th",
            "默认值"
          ]
        ]
      ],
      [
        "tbody",
        [
          "tr",
          [
            "td",
            "className"
          ],
          [
            "td",
            "自定义类"
          ],
          [
            "td",
            "string"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "dataSource"
          ],
          [
            "td",
            "数据源，其中的数据将会被渲染到左边一栏中，",
            [
              "code",
              "targetKeys"
            ],
            " 中指定的除外。"
          ],
          [
            "td",
            [
              "a",
              {
                "title": null,
                "href": "https://git.io/vMM64"
              },
              "TransferItem"
            ],
            "[",
            "]"
          ],
          [
            "td",
            "[",
            "]"
          ]
        ],
        [
          "tr",
          [
            "td",
            "disabled"
          ],
          [
            "td",
            "是否禁用"
          ],
          [
            "td",
            "boolean"
          ],
          [
            "td",
            "false"
          ]
        ],
        [
          "tr",
          [
            "td",
            "filterOption"
          ],
          [
            "td",
            "接收 ",
            [
              "code",
              "inputValue"
            ],
            " ",
            [
              "code",
              "option"
            ],
            " 两个参数，当 ",
            [
              "code",
              "option"
            ],
            " 符合筛选条件时，应返回 ",
            [
              "code",
              "true"
            ],
            "，反之则返回 ",
            [
              "code",
              "false"
            ],
            "。"
          ],
          [
            "td",
            "(inputValue, option): boolean"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "footer"
          ],
          [
            "td",
            "底部渲染函数"
          ],
          [
            "td",
            "(props): ReactNode"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "lazy"
          ],
          [
            "td",
            "Transfer 使用了 ",
            [
              "a",
              {
                "title": null,
                "href": "https://github.com/loktar00/react-lazy-load"
              },
              "react-lazy-load"
            ],
            " 优化性能，这里可以设置相关参数。设为 ",
            [
              "code",
              "false"
            ],
            " 可以关闭懒加载。"
          ],
          [
            "td",
            "object",
            "|",
            "boolean"
          ],
          [
            "td",
            [
              "code",
              "{ height: 32, offset: 32 }"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "listStyle"
          ],
          [
            "td",
            "两个穿梭框的自定义样式"
          ],
          [
            "td",
            "object"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "locale"
          ],
          [
            "td",
            "各种语言"
          ],
          [
            "td",
            "object"
          ],
          [
            "td",
            [
              "code",
              "{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "operations"
          ],
          [
            "td",
            "操作文案集合，顺序从下至上"
          ],
          [
            "td",
            "string",
            "[",
            "]"
          ],
          [
            "td",
            [
              "span",
              "'>', '<'"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "render"
          ],
          [
            "td",
            "每行数据渲染函数，该函数的入参为 ",
            [
              "code",
              "dataSource"
            ],
            " 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 ",
            [
              "code",
              "label"
            ],
            " 字段为 ReactElement，",
            [
              "code",
              "value"
            ],
            " 字段为 title"
          ],
          [
            "td",
            "Function(record)"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "selectedKeys"
          ],
          [
            "td",
            "设置哪些项应该被选中"
          ],
          [
            "td",
            "string",
            "[",
            "]"
          ],
          [
            "td",
            "[",
            "]"
          ]
        ],
        [
          "tr",
          [
            "td",
            "showSearch"
          ],
          [
            "td",
            "是否显示搜索框"
          ],
          [
            "td",
            "boolean"
          ],
          [
            "td",
            "false"
          ]
        ],
        [
          "tr",
          [
            "td",
            "targetKeys"
          ],
          [
            "td",
            "显示在右侧框数据的key集合"
          ],
          [
            "td",
            "string",
            "[",
            "]"
          ],
          [
            "td",
            "[",
            "]"
          ]
        ],
        [
          "tr",
          [
            "td",
            "titles"
          ],
          [
            "td",
            "标题集合，顺序从左至右"
          ],
          [
            "td",
            "string",
            "[",
            "]"
          ],
          [
            "td",
            [
              "span",
              "'', ''"
            ]
          ]
        ],
        [
          "tr",
          [
            "td",
            "onChange"
          ],
          [
            "td",
            "选项在两栏之间转移时的回调函数"
          ],
          [
            "td",
            "(targetKeys, direction, moveKeys): void"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "onScroll"
          ],
          [
            "td",
            "选项列表滚动时的回调函数"
          ],
          [
            "td",
            "(direction, event): void"
          ],
          [
            "td"
          ]
        ],
        [
          "tr",
          [
            "td",
            "onSearchChange"
          ],
          [
            "td",
            "搜索框内容时改变时的回调函数"
          ],
          [
            "td",
            "(direction: 'left'",
            "|",
            "'right', event: Event): void"
          ],
          [
            "td",
            "-"
          ]
        ],
        [
          "tr",
          [
            "td",
            "onSelectChange"
          ],
          [
            "td",
            "选中项发生改变时的回调函数"
          ],
          [
            "td",
            "(sourceSelectedKeys, targetSelectedKeys): void"
          ],
          [
            "td"
          ]
        ]
      ]
    ],
    [
      "h2",
      "注意"
    ],
    [
      "p",
      "按照 React 的",
      [
        "a",
        {
          "title": null,
          "href": "http://facebook.github.io/react/docs/lists-and-keys.html#keys"
        },
        "规范"
      ],
      "，所有的组件数组必须绑定 key。在 Transfer 中，",
      [
        "code",
        "dataSource"
      ],
      "里的数据值需要指定 ",
      [
        "code",
        "key"
      ],
      " 值。对于 ",
      [
        "code",
        "dataSource"
      ],
      " 默认将每列数据的 ",
      [
        "code",
        "key"
      ],
      " 属性作为唯一的标识。"
    ],
    [
      "p",
      "如果你的数据没有这个属性，务必使用 ",
      [
        "code",
        "rowKey"
      ],
      " 来指定数据列的主键。"
    ],
    [
      "pre",
      {
        "lang": "jsx",
        "highlighted": "<span class=\"token comment\" spellcheck=\"true\">// 比如你的数据主键是 uid</span>\n<span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>Transfer</span> <span class=\"token attr-name\">rowKey</span><span class=\"token script language-javascript\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">{</span>record <span class=\"token operator\">=</span><span class=\"token operator\">></span> record<span class=\"token punctuation\">.</span>uid<span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>"
      },
      [
        "code",
        "// 比如你的数据主键是 uid\nreturn <Transfer rowKey={record => record.uid} />;"
      ]
    ]
  ]
};

/***/ })

});